<template>
	<view>
		<view class="plr15">
			<view class="plt15 border-bottom" v-for="(item,index) in list" :key="index">
				<view class="flex alcenter item-content">
					<image :src="item.img" mode="" class="img"></image>
					<view class="ml10 fl1">
						<view class="cl-w ft18">{{item.name}}</view>
						<view class="cl-w8 mt20 ft14 text-over2" v-html="item.info"></view>
						<!-- <view class="flex mt10">
							<view class="label mr10" v-for="it in item.yy">{{it}}</view>
						</view> -->
					</view>
				</view>
				<view class="mt14 flex ft12">
					<view class="flex alcenter " style="width: 240rpx;">
						<u-icon name="eye" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2 text-over">{{($t('text.guankancishu'))}}：{{item.pv}}</view>
					</view>
					<view class="flex alcenter col20" @click="goChapter(item.id)">
						<u-icon name="file-text" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2">{{$t('text.bianji')}}</view>
					</view>
					<!-- <view class="flex alcenter col20"  @click="upload(item.id)">
						<u-icon name="list-dot" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2">章节</view>
					</view> -->
					<view class="flex alcenter col20" v-if="item.status=='normal'" @click="xiajia(item.id)">
						<u-icon name="trash" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2">{{$t('text.xiajia')}}</view>
					</view>
					<view class="flex alcenter col20" v-else>
						<u-icon name="trash" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2">{{($t('text.xiajia'))}}</view>
					</view>
					<view class="flex alcenter col20" @click="ggjiesuo(item.id,item.gg)" v-if="item.gg==0">
						<u-icon name="lock" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2">{{$t('text.guanggjiesuo')}}</view>
					</view>
					<view class="flex alcenter col20" @click="ggjiesuo(item.id,item.gg)" v-if="item.gg==1">
						<u-icon name="lock-open" color="#fff" size="18"></u-icon>
						<view class="cl-w8 ml2">{{$t('text.guanggjiesuo1')}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open" bgColor="#1e1e1e">
			<view class="" style="width: 500rpx;">
				<view class="text-center cl-w ft18 pt12 pb12 border-bottom">{{$t('text.guanggjiesuo')}}</view>
				<view class="pd15">
					<u-radio-group v-model="langValue" placement="column" iconPlacement="right" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '18px'}" v-for="(item, index) in langList" :key="index"
							:label="item.name" :name="item.value">
						</u-radio>
					</u-radio-group>
					<view style="background: #0b90f9;text-align: center; border-radius: 24px; padding: 9px 0; color: #fff;margin-bottom: 10px;" @click="submit">{{$t('text.qd')}}</view>
					<view style="color: aliceblue;font-size: 12px;">
						是否是需要消耗CLIP{{$t('text.integral')}}、或{{$t('text.shouyi')}}{{$t('text.guang1')}}</view>
					<view style="color: aliceblue;font-size: 12px;">{{$t('text.guang2')}}</view>
				</view>
			</view>
		</u-popup>
		<view style="height: 150rpx;"></view>
		<view class="release">
			<view class="btn" @click="$u.route('/pages/creator/user/releaseVideo/chapterAdd?pid='+pid)">
				{{$t('text.tianjiazhangjie')}}</view>
		</view>
	</view>

</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				list: [],
				pid: '',
				show: false,
				langValue: "1",
				langList: [{
						name: 'CLIP' + this.$t('text.integral'),
						disabled: false,
						value: '1'
					},
					{
						name: this.$t('text.shouyi'),
						disabled: false,
						value: '2'
					},

				],
				elementId:""
			}
		},
		onLoad(e) {
			//console.log(111)
			this.pid = e.id
			this.init();
		},
		onShow() {
			this.init()
		},

		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			groupChange(n) {
				console.log('选择完之后', n);

			},
			submit(){
				// 这块需要判断一个余额不足或者CLIP不足弹一下showToast
				this.$httpas.post2({
					data: {
						do: 'creator',
						op: 'ggjiesuo',
						id:this.elementId
					},
					success: res => {
						uni.showToast({
							title: this.$t('text.jiesuochenggong'),
							icon: "none"
						})
						this.show = false
						this.init()
						
					}
				})
			},
			ggjiesuo(id, val) {
				this.elementId=id
				if (val == 1) {
					uni.showToast({
						title: this.$t('text.guanggjiesuo1'),
						icon: "none"
					})
					this.show = false
				} else {
					this.show = true
				}

				// this.$httpas.post2({
				// 	data: {
				// 		do: 'creator',
				// 		op: 'ggjiesuo',
				// 		id:id
				// 	},
				// 	success: res => {
				// 		this.init()
				// 	}
				// })
			},
			async init() {
				let params = {
					language: 0,
					pid: this.pid
				}
				let [err, res] = await this.$httpas.get('/api/creator/zhangjie', params, {
					token: true
				});
				this.list = res.data.data
			},
			async xiajia(id) {
				let params = {
					id: id,
					status: 'hidden', //normal是上架
				}
				let [err, res] = await this.$httpas.get('/api/creator/zhangjie_xiaja', params, {
					token: true
				});
				this.list = res.data.data
			},
			upload(id) {
				uni.navigateTo({
					url: '/pages/creator/user/releaseVideo/chapter?id=' + id
				})
			},
			goChapter(id) {
				uni.navigateTo({
					url: '/pages/creator/user/releaseVideo/chapterAdd?id=' + id
				})
			}

		}
	}
</script>

<style lang="scss">
	.item-content {
		width: 100%;

		.img {
			width: 170rpx;
			height: 228rpx;
			border-radius: 20rpx;
		}

		.label {
			background: #292A2E;
			color: rgba(255, 255, 255, 0.8);
			font-size: 24rpx;
			padding: 6rpx 10rpx;
			border-radius: 8rpx;
		}
	}

	.border-bottom {
		border-bottom: 1px solid #28292D;
	}

	.release {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background: #000;
		padding: 30rpx;

		.btn {
			background: rgba(11, 144, 249, 1);
			text-align: center;
			border-radius: 50rpx;
			padding: 20rpx 0;
			color: #fff;
		}
	}

	.col40 {
		width: 60%;
	}

	.col20 {
		width: 20%;
	}
</style>